﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="../Content/layui/css/layui.css" rel="stylesheet" />
    <script src="../Content/layui/layui.all.js"></script>
    <script src="../Scripts/jquery-1.10.2.min.js"></script>
</head>
<body>
    <audio id="myaudio" controls="controls" style="display:none;">
        <source src="" loop="true" hidden="true" type="audio/mpeg" />
    </audio>
    <script>
        var isplay = false;
        //JavaScript代码区域
        ; !function () {
            var util = layui.util;

            var arr = ['/music/Beyond.mp3', '/music/guxiang.mp3', '/music/Three_Little_Birds.mp3'];
            //监听音乐播放结束事件
            document.getElementById('myaudio').addEventListener('ended', function () {
                var myAuto = document.getElementById('myaudio');
                var index = Math.floor(Math.random() * 3);
                myAuto.src = arr[index];
                myAuto.play();
            }, false);

            //固定块
            util.fixbar({
                bar1: '&#xe652;'
                , bar2: '&#xe643;'
                , css: { right: 50, bottom: 100 }
                , bgcolor: '#393D49'
                , click: function (type) {
                    if (type === 'bar1') {
                        var myAuto = document.getElementById('myaudio');
                        this.innerHTML = "";

                        var index = Math.floor(Math.random() * 3);
                        if (isplay) {
                            if (myAuto.paused) {
                                $(this).removeClass('layui-icon layui-icon-play');
                                $(this).addClass('layui-icon layui-icon-pause');
                                myAuto.play();
                            } else {
                                $(this).removeClass('layui-icon layui-icon-pause');
                                $(this).addClass('layui-icon layui-icon-play');
                                myAuto.pause();
                            }
                        } else {
                            isplay = true;
                            $(this).removeClass('layui-icon layui-icon-play');
                            $(this).addClass('layui-icon layui-icon-pause');
                            myAuto.src = arr[index];
                            myAuto.play();
                        }
                    } else if (type === 'bar2') {
                        isplay = false;
                        var myAuto = document.getElementById('myaudio');
                        myAuto.currentTime = 0;
                        myAuto.pause();
                        $(this).prev().text("");
                        $(this).prev().removeClass('layui-icon layui-icon-pause');
                        $(this).prev().removeClass('layui-icon layui-icon-play');
                        $(this).prev().addClass('layui-icon layui-icon-play');
                    }
                }
            });

        }();
    </script>
</body>
</html>